<!--  -->
<template>
  <div class="box w-90% lg:h-736px h-500px">
    <el-tabs
      v-model="store.selectPageId"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane label="添加好友" name="添加好友"
        ><h2>添加好友/群聊</h2>
        <el-row>
          <el-col :span="20"
            ><el-input v-model="userName" placeholder="Please input" />
          </el-col>
          <el-col :span="4"
            ><el-button @click="selectSession">搜索</el-button></el-col
          >
        </el-row>
        <SelectChatList></SelectChatList
      ></el-tab-pane>
      <el-tab-pane label="创建群聊" name="创建群聊">
        <h2>创建群聊</h2>
        <el-row>
          <el-col :span="20">
            <el-input v-model="groupName" placeholder="群聊名称" />
          </el-col>
          <el-col :span="4">
            <el-button @click="createChat">创建</el-button>
          </el-col>
        </el-row>
        <FriendsList></FriendsList>
      </el-tab-pane>
      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useMainStore } from "@/store/main";
import { TabsPaneContext } from "element-plus";
import { GroupConversition, Friends } from "@/class/group";
import { fa } from "element-plus/es/locale";
const store = useMainStore();
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab.props.name);
};

const userName = ref("");
const groupName = ref("");

//查询用户
function selectSession() {
  store.selectUser(userName.value);
}

//创建群聊
function createChat() {
  let friends = store.friends?.filter((item) => item.isTrue == true);
  let timestamp = +new Date() + "";

  let groupConversition = new GroupConversition(
    store.userInfo.id,
    friends,
    groupName.value,
    4,
    0,
    timestamp,
    "",
    false,
    store.userInfo.avatar
  );
  console.log(groupConversition);

  store.sendInfos(groupConversition);
}
</script>

<style scoped>
.box {
  padding-left: 15px;
}
</style>
